<template>
  <!-- 车品、配件支付成功页面 -->
	<view class="pay-success">
    <view v-if="isSuccess">
      <view class="img-box">
        <image class="img" src="https://files.yzsheng.com/client/weixin/paySussess.png" mode="widthFix"></image>
      </view>
      
      <!-- 交易金额 -->
      <view class="price">
        <text class="font-32 mr-20">订单支付成功</text>
        <text class="font-36 font-bold">￥{{ resultInfo.totalMoney }}</text>
      </view>
      
      <!-- 交易信息 -->
      <view class="info">
        <view class="row">
          <text>交易流水号</text>
          <text>{{ resultInfo.orderNo }}</text>
        </view>
        <view class="row">
          <text>交易方式</text>
          <text>{{ resultInfo.payPlatformName }}</text>
        </view>
        <view class="row">
          <text>交易时间</text>
          <text>{{ resultInfo.tradeTime }}</text>
        </view>
      </view>
      
      <!-- 按钮 -->
      <view class="btn-box flex">
        <view class="btn" @click="goHomePage()">
          <i-button text="返回首页" color="#FFE23E" bg-color="#333" shape="circleLeft"></i-button>
        </view>
        <view class="btn" @click="goOrderPage()">
          <i-button text="查看订单" color="#333" shape="circleRight"></i-button>
        </view>
      </view>      
    </view>
	</view>
</template>

<script>
  import iButton from '@/components/i-button.vue'
  
	export default {
    components: { iButton },
		data() {
			return {
        orderId: '测试 1212151515', // 订单id
        type: 'carGoods',  // 业务模块 maintenance:维保 maintenanceorder：维保订单下单支付
				resultInfo: {
          totalMoney: 102,
          orderNo: '测试 202012081101',
          payPlatformName: '测试 微信',
          tradeTime: '测试 2020.12.08 11:01'
        },
        t: null,
        isSuccess: false
			}
		},
    
    onLoad(e) {
      this.orderId = e.id  // 订单号
      this.type = e.type  // 业务模块的支付，车品或配件
    },
    
    created() {
      // 查询是否支付成功，轮询接口，知道接口信息返回true
      this.t = setInterval(() => {
        this.getOrderStatusInfo()
      }, 1500)
    },
    
    methods: {
      // 获取车品订单是否支付成功
      async getOrderStatusInfo() {
        uni.showLoading()
        try {
          var res = {}
          if (this.type === 'maintenanceorder') {
            res = await this.$api.maintenanceOrder.CheckOrderMaintenancePaid({
              order_id: this.orderId
            })
          }
          console.log('查后台支付成功状态', res)
          // 如果支付成功，将定时器清理
          if (res.data.isSuccess) {
            this.resultInfo = res.data
            this.isSuccess = res.data.isSuccess
            clearInterval(this.t)
            uni.hideLoading()
          } else {
            
          }
        } catch (err) {
          console.log(err)
          clearInterval(this.t)
        }
      },
      
      // 返回首页
      goHomePage() {
        uni.switchTab({
          url: `/pages/index/index`
        })
      },
      
      // 查看订单
      goOrderPage() {
        if (this.type === 'maintenanceorder') {
          uni.redirectTo({
            url: `/pages_order/maintenanceOrderDetail/maintenanceOrderDetail?id=${this.orderId}`
          })
        } 
      }
    }
	}
</script>

<style lang="scss" scoped>
.img-box {
  width: 304rpx;
  height: 304rpx;
  margin: 100rpx auto 0;
  
  .img {
    width: 100%;
  }
}

// 金额
.price {
  margin-top: 60rpx;
  text-align: center;
  color: #333;
}

// 交易信息
.info {
  height: 188rpx;
  margin: 100rpx 0;
  padding: 0 67rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
  .row {
    display: flex;
    justify-content: space-between;
    
    text {
      font-size: 30rpx;
      color: #666;
    }
  }
}

// 按钮
.btn-box {
  padding: 0 67rpx;
  .btn {
    flex: 1;
    
    >view {
      width: 100%;
    }
  }
}
</style>
